<template>
  <div class="com-upload upload-box" :class="{'done':value}" @click="filePick">
    <input ref="file" type="file" @change="changeHandle">
    <template v-if="value || thumb">
      <img :src="thumb || value">
      <template v-if="!!progress">
        <i class="ic" :class="icon"></i>
        <p>正在上传</p>
      </template>
      <template v-else>
        <i class="ic" :class="icon"></i>
        <p>重新上传</p>
      </template>
    </template>
    <template v-else>
      <i class="ic ic-idcard"></i>
      <p>{{label}}</p>
    </template>
  </div>
</template>
<script>
export default {
  name:'com-upload',
  model: {
    prop: 'model',
    event: 'change'
  },
  props:{
    model:String,
    icon:{
      default:'ic-refresh'
    },
    label:{
      default:''
    },
    progress:{
      default:false,
    },
    thumb:{
      default:''
    },
    value:String,
    params:{
      default:'',
    }
  },
  data(){
    return {
      img:'',
    }
  },
  mounted(){
    this.img = this.model;
  },
  methods:{
    changeHandle(e){
      // this.img =  e.target.value;
      this.$emit('change', e.target)
    },
    filePick(){
      //如果是乐马客户端，并且是安卓需要调用客户端方法
      if(this.$tools.isLema && this.$tools.isAndroid){
        window.JSInterface2Java.openAlbums(this.params[0],this.params[1])

      }else{
        this.$refs.file.click();
      }
    }
  }
}
</script>
<style lang="less" scoped>
.com-upload {
    position: relative;
    padding:20px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:280px;
    height:210px;
    overflow: hidden;
    border:1px dashed #bec2cc;
    border-radius: 4px;

    input {
      position: absolute;
      top:-100px;
      left:-100px;
      width:0;
      height: 0;
      opacity: 0;
    }
    &.done {
      border:none;
      background-color:rgba(0,0,0,.5);
      p {
        color:#fff;
      }

    }
    img {
      position:absolute;
      top:0;
      left:0;
      z-index:-1;
      width:100%;
      height:100%;
    }
    p {
      margin-top:16px;
      font-size:24px;
      color:#c0c3cc;
    }
  }
</style>

